<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<title>小组管理</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap2.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/blog.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.print.min.css" rel="stylesheet" media="print">
	<link href="/static/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
	<link href="/static/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/lib/cupertino/jquery-ui.min.css" rel="stylesheet">
	<link href="/static/artDialog/css/ui-dialog.css" rel="stylesheet">
	<link href="/static/wickedpicker/dist/wickedpicker.min.css" rel="stylesheet">
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
	<script src="/static/fullcalendar/lib/jquery.min.js"></script>
	<script src="/static/fullcalendar/lib/jquery-ui.min.js"></script>
	<script src="/static/fullcalendar/lib/moment.min.js"></script>
	<script src="/static/fullcalendar/fullcalendar.js"></script>
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="/static/artDialog/dist/dialog-min.js"></script>
	<script src="/static/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/wickedpicker/dist/wickedpicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<style>
		body{
			margin:40px 40px;
			padding:0;
			background:white;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 14px;
		}
	</style>
	<script>
        var selectGroupId = 0;
        //设置当前小组
        function setSelectGroup(GroupId) {
            selectGroupId = GroupId;
            {#$('#InviteGroupModal').modal('show');#}
        }

        function setSelectGroupInfo(GroupId,GroupName,GroupTask,GroupMark,GroupKey) {
            $('#update_group_id').val(GroupId);
            $('#update_group_name').val(GroupName);
            $('#update_group_task').val(GroupTask);
            $('#update_group_mark').val(GroupMark);
            $('#update_group_key').val(GroupKey);
            {#$('#InviteGroupModal').modal('show');#}
        }
    //--退出小组
	function groupQuit(group_id) {
		if(confirm("确认退出？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_quit",//url
                data:"{\"group_id\":\""+group_id+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("退出小组出错！");
                    window.location.reload();
                }
            });
        }
	};


	    //--解散小组
	function groupDelete(group_id) {
		if(confirm("确认解散？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_delete",//url
                data:"{\"group_id\":\""+group_id+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "Success") {
                        alert("SUCCESS");
                        $("#btnSubmit").attr("disabled", true);
                    }
                    ;

                },
                error: function () {
                    alert("解散成功！");
                    window.location.reload();
                }
            });
        }
	};

	//创建小组
	function groupAdd() {
	    var groupName = $('#group_name').val();
	    var groupMark = $('#group_mark').val();
	    var groupKey = $('#group_key').val();
	    var groupTask = $('#group_task').val();
		if(confirm("确认添加？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_add",//url
                data:"{\"group_name\":\""+groupName+"\",\"group_mark\":\""+groupMark+"\",\"group_task\":\""+groupTask+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("新增小组成功！");
                        window.location.reload();
                    }
                    else{
                        alert("新增小组失败！");
                    }
                    ;

                },
                error: function () {
                    alert("新增小组成功！");
                    window.location.reload();
                }
            });
        }
	};

	//加入小组
	function groupJoin() {
	    var groupName = $('#join_group_name').val();
	    var groupKey = $('#join_group_key').val();
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_join",//url
                data:"{\"group_name\":\""+groupName+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("SUCCESS");
                        $("#btnSubmit").attr("disabled", true);
                        window.location.reload();
                    }
                    else{
                        alert("ERROR:小组信息错误！");
                    }
                },
                error: function () {
                    alert("加入小组成功");
                    window.location.reload();
                }
            });
	};

	//新增待办
    function addGroupTask() {
	    var group_task = $('#group_task').val();
	    var group_id = $('#group_id').val();
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_task_add",//url
                data:"{\"group_task\":\""+group_task+"\",\"group_id\":\""+group_id+"\"}",
                success: function (result) {
                        alert(result);
                        window.location.reload();
                },
                error: function () {
                    alert("新增待办出错！");
                    window.location.reload();
                }
            });
	};

	//邀请成员
	function groupInvite() {
	    var invite_user_nickname = $('#invite_user_nickname').val();
	    var groupId = selectGroupId;
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_add_colleague",//url
                data:"{\"nickname\":\""+invite_user_nickname+"\",\"group_id\":\""+groupId+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    $("#btnSubmit").attr("disabled", true);
                    window.location.reload();
                },
                error: function () {
                    alert("邀请组员出错");
                    window.location.reload();
                }
            });
	};

    //修改小组
	function groupUpdate() {
	    var groupId = $('#update_group_id').val();
	    var groupName = $('#update_group_name').val();
	    var groupMark = $('#update_group_mark').val();
	    var groupKey = $('#update_group_key').val();
	    var groupTask = $('#update_group_task').val();
		if(confirm("确认添加？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_info_update",//url
                data:"{\"group_id\":\""+groupId+"\",\"group_name\":\""+groupName+"\",\"group_mark\":\""+groupMark+"\",\"group_task\":\""+groupTask+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("修改小组信息成功！");
                        window.location.reload();
                    }
                    else{
                        alert("修改小组信息失败！");
                    }
                },
                error: function () {
                    alert("修改小组信息成功！");
                    window.location.reload();
                }
            });
        }
	};

	//删除组员
	function deleteMember(userId,groupId) {
		if(confirm("确认删除？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_member_delete",//url
                data:"{\"group_id\":\""+groupId+"\",\"user_id\":\""+userId+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("删除小组成员失败！");
                    window.location.reload();
                }
            });
        }
	};



    </script>
</head>
<body style="background: url('/static/imgs/background.jpg');background-repeat:no-repeat;background-size:cover">
    <!-- 导航栏 -->
    <nav class="navbar navbar-fixed-top navbar-inverse" style="height: 40px;" >
      <div class="container">
        <div class="navbar-header" style="height: 40px;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/user/to_user_index_page">主页</a></li>
            <li><a href="/schedule/toScheduleList">待办列表</a></li>
            <li><a href="/colleague/colleague_list">好友管理</a></li>
            <li><a href="/group/user_group_list">小组管理</a></li>
            <li><a href="#" data-toggle="modal"  data-target="#updateUserInfo">欢迎您 {{ session["user_nickname"] }}</a></li>
            <li><a href="/user/user_logout">注销</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

     <!-- 修改用户信息 -->
<div class="modal fade" id="updateUserInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
	            </div>
                <div class="modal-body">
                      <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="update_user_name" value="{{ session['user_name'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">密码</label>
					    <input type="text" class="form-control" id="update_user_pwd" value="{{ session['user_pwd'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="update_user_nickname" value="{{ session['user_nickname'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="update_user_sex" value="{{ session['user_sex'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="update_user_email" value="{{ session['user_email'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="update_user_phone" value="{{ session['user_phone'] }}">
					  </div>
	            </div>
                <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="updateUser()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script> //修改小组
	function updateUser() {
	    var user_name = $('#update_user_name').val();
	    var user_pwd = $('#update_user_pwd').val();
	    var user_nickname = $('#update_user_nickname').val();
	    var user_sex = $('#update_user_sex').val();
	    var user_email = $('#update_user_email').val();
	    var user_phone = $('#update_user_phone').val();
		if(confirm("确认修改？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/user_data_update",//url
                data:"{\"user_sex\":\""+user_sex+"\",\"user_name\":\""+user_name+"\",\"user_pwd\":\""+user_pwd+"\",\"user_nickname\":\""+user_nickname+"\",\"user_email\":\""+user_email+"\",\"user_phone\":\""+user_phone+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("修改小组信息成功！");
                        window.location.reload();
                    }
                    else{
                        alert("修改小组信息失败！");
                    }
                },
                error: function () {
                    alert("修改用户信息成功！");
                    window.location.reload();
                }
            });
        }
	};

	//小组任务完成
	function groupTaskFinish(groupTaskId) {
	    console.log(groupTaskId);
		if(confirm("确认完成？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_task_finish",//url
                data:"{\"groupTaskId\":\""+groupTaskId+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("完成待办出错！");
                    window.location.reload();
                }
            });
        }
	};


	//待办加入日程
	function addMeetToMemberSchedule() {

		if(confirm("确认将会议加入到组员日程？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_meet_add",//url
                data:"{\"group_id\":\"{{ groupInfo.id }}\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("添加会议出错！");
                    window.location.reload();
                }
            });
        }
	};

    //小组任务删除
	function groupTaskDelete(groupTaskId) {
	    console.log(groupTaskId);
		if(confirm("确认删除？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_task_delete",//url
                data:"{\"groupTaskId\":\""+groupTaskId+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("删除待办出错！");
                    window.location.reload();
                }
            });
        }
	};

    //getMeetTime 获取会议推荐时间
	function getMeetTime() {
	    start_time = $('#start_time').val();
	    end_time = $('#end_time').val();
	    long_time = $('#long_time').val();
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_meet_time_get",//url
                data:"{\"start_time\":\""+start_time+"\",\"end_time\":\""+end_time+"\",\"long_time\":\""+long_time+"\"}",
                success: function (result) {
                    $('#MeetTimeGet').modal('hide');
                    console.log(result);//打印服务端返回的数据(调试用)
                    document.getElementById("MeetingTime").style.display="";
                    document.getElementById("meetTimeGetBtn").style.display="none";
                    var meettimespan = document.getElementById("meettime");
                    meettimespan.innerText = "会议推荐时间 ： "+result;
                },
                error: function () {
                    $('#MeetTimeGet').modal('hide');
                    alert("获取会议推荐时间出错！");
                }
            });
	};
    </script>

    <!-- 导航栏结束 -->

    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">{{ groupInfo.group_name }}</h1>
        <p class="lead blog-description">{{ groupInfo.group_mark }} &nbsp;&nbsp; {{ groupInfo.group_task }}</p>
      </div>

      <div class="row">

        <div class="col-sm-8 blog-main">
            <a href="#"><button type="button" id="meetTimeGetBtn" data-toggle="modal" data-target="#MeetTimeGet" class="btn btn-primary">会议推荐时间获取</button></a>
            <br/>
            <br/>
            <div id ="MeetingTime" class="blog-post" style="display: none;">
              <div class="sidebar-module sidebar-module-inset">
                  <h4><p id="meettime"></p></h4>
                  {% if session['user_id'] == groupInfo.group_leader %}
                  <a href="#"><button type="button" onclick="addMeetToMemberSchedule()" class="btn btn-primary">会议时间加入到小组成员日程</button></a>
                      <button class="btn btn-primary" onclick="reloadMeettime()">取消</button>
                  {% endif %}
              </div>
          </div><!-- /.blog-post -->
            <script>
                function reloadMeettime() {
                        window.location.reload();
                }
            </script>
          <div class="blog-post">
            <div class="sidebar-module sidebar-module-inset">
            <h3>小组待办</h3>

          <div class="sidebar-module">
            <ol class="list-unstyled">
               {% if group_task_list %}
                {% for item in group_task_list %}
                    <div style="width:100%">
                    {% if item.finished == 0 %}
                         <li style="height:35px;width:100%">{{ item.task }}<button type="button" style="float:right" onclick="groupTaskFinish({{ item.id }})" class="btn btn-primary">完成</button>
                             {% else %}
                        <li style="height:35px;width:100%">{{ item.task }}<button type="button" style="float:right;background: red;" class="btn btn-primary">已完成</button>
                             {% endif %}
                        {% if session['user_id'] == groupInfo.group_leader %}
                           <button type="button" style="float:right" onclick="groupTaskDelete({{ item.id }})" class="btn btn-primary">删除</button>
                        {% endif %}
                   </li> </div>
                {% endfor %}
            {% else %}
                <li>暂无待办</li>
            {% endif %}
            {% if session['user_id'] == groupInfo.group_leader %}
                <a href="#"><button type="button" data-toggle="modal" data-target="#GroupTaskModal" class="btn btn-primary">新增待办</button></a>
            {% endif %}
            </ol>
          </div>
          </div>
          </div><!-- /.blog-post -->
        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h3>小组成员</h3>


              <script>
                        function showModal(username) {
                            $('#'+username+'').modal('show');
                        }
                    </script>
          <div class="sidebar-module">
            <h3>组长{{ groupInfo.group_leader_name }}</h3>
            <ol class="list-unstyled">
            {% if user_list %}
                {% for item in user_list %}

                    <li><a href="#" onclick="showModal('{{ item.username }}')">组员:&nbsp;{{ item.nickname }}</a></li>


                     <!-- 小组成员信息 -->
<div class="modal fade" id="{{ item.username }}" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">小组成员信息</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="user_name" value="{{ item.username }}">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="nick_name" value="{{ item.nickname }}">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="sex" value="{{ item.sex }}">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="email" value="{{ item.email }}">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="phone" value="{{ item.phone }}">
					  </div>

	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          {% if session['user_id'] == groupInfo.group_leader %}
	                <button type="button" id="invite" class="btn btn-primary" onclick="deleteMember('{{ item.id }}','{{ groupInfo.id }}')">删除组员</button>
          {% endif %}
                     <a href="/colleague/to_colleague_schedule?colleague_id={{ item.id }}"><button type="button" class="btn btn-primary">查看组员日程</button></a>
                        <a href="/colleague/to_colleague_events?colleague_id={{ item.id }}"><button type="button" class="btn btn-primary">查看组员待办</button></a>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
                {% endfor %}
            {% else %}
                <li>暂无组员</li>
            {% endif %}
            </ol>
          <a href="#"><button type="button" data-toggle="modal" data-target="#InviteGroupModal" onclick="setSelectGroup({{ currentGroupId }})" class="btn btn-primary">邀请组员</button></a>
          </div>
          </div>

        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <!-- 邀请组员 -->
<div class="modal fade" id="InviteGroupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">邀请成员</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">用户昵称</label>
					    <input type="text" class="form-control" id="invite_user_nickname" placeholder="用户昵称">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="invite" class="btn btn-primary" onclick="groupInvite()">邀请</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





       <!-- 会议时间设置 -->
<div class="modal fade" id="MeetTimeGet" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">会议时间</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">最早开始时间</label>
					    <input type="text" class="form-control" id="start_time" placeholder="最早开始时间（整点）">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">最晚结束时间</label>
					    <input type="text" class="form-control" id="end_time" placeholder="最晚结束时间（整点）">
					  </div>

                        <div class="form-group">
					    <label for="exampleInput1">会议时长（小时）</label>
					    <input type="text" class="form-control" id="long_time" placeholder="会议时长（小时）">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="invite" class="btn btn-primary" onclick="getMeetTime()">提交</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!-- 新增待办 -->
<div class="modal fade" id="GroupTaskModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">新增待办</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">待办事项</label>
					    <input type="text" class="form-control" id="group_task" placeholder="待办事项">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <input type="hidden" class="form-control" id="group_id" value="{{ currentGroupId }}">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="invite" class="btn btn-primary" onclick="addGroupTask()">新增</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>